<template>
    <div class="container">
        <Header/>
        <div class="banner">
            <div class="download Gwidth">
                <div class="cont">
                    <h1>一起家具网小程序</h1>
                    <div class="des">全新体验，即扫即用，免下载安装</div>
                    <div class="des">价格全透明，厂家随意挑，家具定制一站式服务</div>
                    <div class="btm">
                        <div class="right">
                            <div class="img">
                                <img src="~/static/image/xcx_ewm.png" alt="">
                            </div>
                            <p>微信扫一扫，免下载安装</p>
                        </div>
                    </div>
                </div>
                <div class="app_imgs">
                    <div v-swiper:mySwiper="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="~/static/image/app1.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="~/static/image/app1.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="~/static/image/app1.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <ul>
                <li>
                    <div class="item Gwidth">
                        <div class="cont">
                            <h1>全网商家排名</h1>
                            <h1>抢先速递</h1>
                            <div class="des">
                                <p>每日更新，厂家最新排名</p>
                                <p>厂家介绍，产品中心，网友评论</p>
                                <p>全新解析，解决您的选厂家的难题</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item Gwidth">
                        <div class="cont">
                            <h1>智能报价工具</h1>
                            <h1>提供全面的定制方案</h1>
                            <div class="des">
                                <p>定制条件自由搭配，配置对比更加直观</p>
                                <p>实时更新厂家报价信息，促销优惠一目了然</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item Gwidth">
                        <div class="cont">
                            <h1>家家小秘+人工客服</h1>
                            <div class="des">
                                <p>您的私人家教定制小助理</p>
                                <p>有关厂家的问题，都交给家家小秘</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="cont">
                <div class="ewm">
                    <img src="~/static/image/xcx_ewm.png" alt="">
                </div>
                <p>微信扫一扫 免下载安装</p>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import Header from "~/components/Header.vue";
export default {
    components: {
		Header
	},
    data(){
        return{
            swiper: {
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                }
            },
        }
    },
    created(){
        
    },
    computed:{
		...mapState(['address'])
	},
    mounted(){
        
    },
    methods:{
        
    },
}
</script>
<style scoped>
    
    .banner{
        width: 100%;
        height: 596px;
        background: url(~/static/image/banner_xcx.png)center/cover no-repeat;
        position: relative;
    }
    .banner::after{
        content: '';
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        left: 0;
        top:0;
    }
    .banner .download{
        padding: 75px;
        position: relative;
        z-index: 2;
        text-align: center;
    }
    .banner .download .cont{
        width: 600px;
        padding-top: 67px;
    }
    .banner .download .ico img{
        width: 117px;
        height: 117px;
    }
    .banner .download h1{
        font-size: 60px;
        font-weight: bold;
        color: #FFFFFF;
    }
    .banner .download .des{
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
    }
    .banner .download .btm{
        margin-top: 42px;
        display: flex;
        align-items: top;
        justify-content: center;
    }
    .banner .download .btm .left .item{
        width: 176px;
        height: 63px;
        background:rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        margin-bottom: 14px;
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 63px;
        text-align: left;
    }
    .banner .download .btm .left .item:first-child{
        background:rgba(255, 255, 255, 0.3) url(~/static/image/ico/ios.png)22px center no-repeat;
        padding-left: 70px;
    }
    .banner .download .btm .left .item:last-child{
        background:rgba(255, 255, 255, 0.3) url(~/static/image/ico/android.png)22px center no-repeat;
        padding-left: 70px;
        margin-bottom: 0;
    }
    .banner .download .btm .right{
        text-align: center;
        margin-left: 40px;
    }
    .banner .download .btm .right .img{
        
        border-radius: 10px;
        font-size: 0;
        text-align: center;
        line-height: 140px;
        margin: 0 auto;
    }
    .banner .download .btm .right img{
        width: 120px;
        height: 120px;
        vertical-align: middle;
    }
    .banner .download .btm .right p{
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        margin-top: 10px;
    }
    .banner .app_imgs{
        position: absolute;
        right:88px;
        top:70px;
        width: 303px;
    }
    .banner .app_imgs .img{
        width: 303px;
        height: 611px;
        /* background: #FFFFFF; */
        /* box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.14); */
        border-radius: 42px;
        line-height: 611px;
        margin-bottom: 30px;

    }
    .banner .app_imgs .img img{
        vertical-align: middle;
        max-width: 100%;
    }
    .banner>>>.swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        background: #CCCCCC;
        opacity: 0.5;
        border-radius: 5px;
        transition: 0.35s;
    }
    .banner>>>.swiper-pagination-bullet-active{
        width: 30px;
        height: 10px;
        background: #F30213;
        opacity: 1;
        border-radius: 5px;
    }
    .banner>>>.swiper-container-horizontal > .swiper-pagination-bullets{
        bottom: 0;
    }
    .container .content .item{
        height: 605px;
        align-items: center;
        display: flex;
        justify-content: flex-end;
    }
    .container .content .item h1{
        font-size: 48px;
        font-weight: bold;
        color: #000000;
        line-height: 67px;
        margin-bottom: 20px;
    }
    .container .content .item .des p{
        font-size: 20px;
        font-weight: 500;
        color: #666666;
        line-height: 38px;
    }
    .container .content li:nth-child(1) .item{
        background: #FFFFFF url(~/static/image/d-app4.png)left center no-repeat;
    }
    .container .content li:nth-child(2){
        background-color: #FCF8F8;
    }
    .container .content li:nth-child(2) .item{
        justify-content: flex-start;
        background: #FCF8F8 url(~/static/image/d-app5.png)right center no-repeat;
        text-align: right;
    }
    .container .content li:nth-child(3) .item{
        background: #FFFFFF url(~/static/image/d-app6.png)left center no-repeat;
    }
    .container .footer{
        height: 364px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FCF8F8;
    }
    .container .footer .ewm{
        width: 158px;
        height: 158px;
        margin: 0 auto;
    }
    .container .footer .ewm img{
        width: 100%;
        height: 100%;
        
    }
    .container .footer p{
        font-size: 22px;
        font-weight: 400;
        color: #333333;
        margin-top: 30px;
    }
</style>
